<template>
	<div class="userManage">
		<div class="queryForm">
			<a-form-model :model="queryForm" layout="inline">
				<a-form-model-item label="用户名">
					<a-input v-model="queryForm.username" placeholder="请输入用户名" allow-clear />
				</a-form-model-item>
				<a-form-model-item label="姓名">
					<a-input v-model="queryForm.realName" placeholder="请输入姓名" allow-clear />
				</a-form-model-item>
				<a-form-model-item label="邮箱">
					<a-input v-model="queryForm.email" placeholder="请输入邮箱" allow-clear />
				</a-form-model-item>
				<a-form-model-item label="推荐人">
					<a-input v-model="queryForm.inviteUserName" placeholder="请输入推荐人" allow-clear />
				</a-form-model-item>
				<a-form-model-item>
					<a-button type="primary" @click="queryData" :loading="loading1">查询</a-button>
				</a-form-model-item>
			</a-form-model>
		</div>
		<a-table :columns="columns" :data-source="userData" :loading="tableLoading" :pagination="pagination"
			@change="pageChange" :rowKey="rowKey">
			<template slot="username" slot-scope="text">
				<a href="javascript:;">{{ text }}</a>
			</template>
			<template slot="level" slot-scope="text, record">
				<a-icon title="修改推广等级" type="edit" @click="editLevel(record)" style="margin-right: 8px;"
					theme="twoTone" />
				{{ levelText[text] }}
			</template>
			<template slot="inviteUserName" slot-scope="text, record">
				<a-icon title="修改推荐人" type="edit" @click="handleChangeInviter(record)" style="margin-right: 8px;"
					theme="twoTone" />
				{{ text ? text : '首批会员' }}
			</template>
			<template slot="operate" slot-scope="text, record">
				<a-button size="small" type="primary" @click="givingFil(record)">赠送算力券</a-button>
			</template>
		</a-table>
		<div ref="modalHtml">
			<a-modal v-model="editLevelVisible" :title="title" :footer="null" :getContainer="() => $refs.modalHtml">
				<a-form-model :model="modalForm" :label-col="{ span: 5 }" :wrapper-col="{ span: 14 }" ref="ruleForm">
					<a-form-model-item label="推广等级">
						<a-select v-model="modalForm.level">
							<a-select-option :value="0"> 普通用户</a-select-option>
							<a-select-option :value="1"> P1级别</a-select-option>
							<a-select-option :value="2"> P2级别</a-select-option>
							<a-select-option :value="3"> P3级别</a-select-option>
							<a-select-option :value="4"> P3S级别</a-select-option>
							<a-select-option :value="5"> 分公司</a-select-option>
							<a-select-option :value="6"> 商学院</a-select-option>
						</a-select>
					</a-form-model-item>
					<a-form-model-item label="免考核截止">
						<a-date-picker v-model="modalForm.levelTime" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD"
							:disabled-date="disabledDate" placeholder="选择时间" style="width: 100%" />
					</a-form-model-item>
					<a-form-model-item>
						<a-button type="primary" @click="changeLevel" style="float: right">提交</a-button>
					</a-form-model-item>
				</a-form-model>
			</a-modal>
			<a-modal v-model="inviteUserVisible" :title="title3" :footer="null" :getContainer="() => $refs.modalHtml">
				<a-form-model :model="modalForm2" :label-col="{ span: 5 }" :wrapper-col="{ span: 14 }" ref="ruleForm">
					<a-form-model-item label="当前推荐人" style="text-algin: left;">
						{{ currentInvite ? currentInvite : '首批会员' }}
					</a-form-model-item>
					<a-form-model-item label="修改推荐人">
						<a-select show-search :value="modalForm2.inviteUserId" placeholder="输入用户名"
							:default-active-first-option="false" :show-arrow="false" :filter-option="false"
							:not-found-content="null" @search="handleSearch" @change="handleChange">
							<a-select-option v-for="user in searchOptions" :key="user.userId">
								{{ user.username }}
							</a-select-option>
						</a-select>
					</a-form-model-item>
					<a-form-model-item>
						<a-button type="primary" @click="changeInviter" style="float: right">提交</a-button>
					</a-form-model-item>
				</a-form-model>
			</a-modal>
			<a-modal v-model="givingVisible" :title="title1" :footer="null" :getContainer="() => $refs.modalHtml">
				<a-form-model :model="modalForm1" :label-col="{ span: 4 }" :rules="rules" :wrapper-col="{ span: 14 }"
					ref="ruleForm">
					<a-form-model-item label="赠送数量" prop="num">
						<a-input v-model="modalForm1.num" placeholder="数字或者两位小数" />
					</a-form-model-item>
					<a-form-model-item>
						<a-button type="primary" :loading="loading" @click="givingCard('ruleForm')"
							style="float: right">提交</a-button>
					</a-form-model-item>
				</a-form-model>
			</a-modal>
			<a-modal v-model="groupVisible" :title="title2" :footer="null" width="50%"
				:getContainer="() => $refs.modalHtml">
				<tree-charts :showGroupData="showGroupData"></tree-charts>
			</a-modal>
		</div>
	</div>
</template>

<script>
	import {
		getUserList,
		updateLevel,
		addCard,
		searchUser,
		changeInviteUser
	} from '../../serves';
	import TreeCharts from './treeChart.vue';
	import moment from 'moment';

	const levelText = ['普通用户', 'P1级别', 'P2级别', 'P3级别', 'P3S级别', '分公司', '商学院'];

	const columns = [{
			title: '用户名',
			dataIndex: 'username',
			key: 'username',
			ellipsis: true,
			scopedSlots: {
				customRender: 'username'
			}
		},
		{
			title: '真实姓名',
			dataIndex: 'realName',
			key: 'realName',
			ellipsis: true
		},
		{
			title: '实名认证状态',
			dataIndex: 'realNameVerificationStatus',
			key: 'realNameVerificationStatus',
			ellipsis: true,
			customRender: (val) => {
				if (val == 1) {
					return '待认证';
				} else if (val == 2) {
					return '认证失败';
				} else if (val == 3) {
					return '认证成功';
				} else {
					return '用户未认证';
				}
			}
		},
		{
			title: '账户状态',
			dataIndex: 'status',
			key: 'status',
			ellipsis: true,
			customRender: (val) => {
				if (val == 1) {
					return '正常';
				} else {
					return '异常';
				}
			}
		},
		{
			title: '推荐人',
			dataIndex: 'inviteUserName',
			key: 'inviteUserName',
			ellipsis: true,
			scopedSlots: {
				customRender: 'inviteUserName'
			},
			width: 200
		},
		{
			title: '推广等级',
			dataIndex: 'level',
			key: 'level',
			ellipsis: true,
			scopedSlots: {
				customRender: 'level'
			}
		},
		{
			title: '人工设定',
			dataIndex: 'manualSetting',
			key: 'manualSetting',
			ellipsis: true,
			customRender: (val) => {
				if (val == 1) {
					return '是';
				} else {
					return '否';
				}
			}
		},
		{
			title: '注册时间',
			dataIndex: 'createTime',
			key: 'createTime',
			ellipsis: true,
			width: 220
		},
		{
			title: '操作',
			dataIndex: 'operate',
			key: 'operate',
			ellipsis: true,
			scopedSlots: {
				customRender: 'operate'
			}
		}
	];
	export default {
		name: 'UserManage',
		components: {
			TreeCharts
		},
		data() {
			const validateNum = (rule, value, callback) => {
				let reg = /^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/;
				if (value === '') {
					callback(new Error('赠送数量不能为空！'));
				} else if (!reg.test(value)) {
					callback(new Error('数字或者两位小数'));
				} else {
					callback();
				}
			}
			return {
				columns,
				levelText,
				tableLoading: false,
				userData: [],
				pagination: {
					current: 1,
					total: 0,
					pageSize: 10,
					showSizeChanger: true,
					showTotal: (total) => `共 ${total} 条`,
					pageSizeOptions: ['10', '20', '30', '40', '50']
				},
				lastPageSize: 10,
				queryForm: {
					realName: '',
					email: '',
					username: '',
					inviteUserName: ''
				},
				modalForm: {
					level: '',
					levelTime: ''
				},
				modalForm1: {
					num: ''
				},
				modalForm2: {
					inviteUserId: ''
				},
				title: '修改推广等级',
				title1: '赠送算力券',
				title2: '推广关系',
				title3: '修改推荐人',
				editLevelVisible: false,
				givingVisible: false,
				currentInvite: '',
				searchOptions: [],
				inviteUserVisible: false,
				groupVisible: false,
				showGroupData: '',
				rules: {
					num: [{
						required: true,
						validator: validateNum,
						trigger: 'change'
					}]
				},
				userId: '',
				loading: false,
				loading1: false,
			};
		},
		mounted() {
			this.handleQuery();
		},
		methods: {
			disabledDate(current) {
				return current && current < moment().endOf('day');
			},
			queryData() {
				this.loading1 = true
				this.handleQuery()
			},
			givingFil(val) {
				this.userId = val.id;
				this.givingVisible = true;
			},
			handleChangeInviter(record) {
				this.inviteUserVisible = true;
				this.currentInvite = record.inviteUserName;
				this.userId = record.id;
			},
			handleSearch(val) {
				searchUser({
					username: val
				}).then((res) => {
					this.searchOptions = res.data.data;
				});
			},
			handleChange(val) {
				this.modalForm2.inviteUserId = val;
			},
			changeInviter() {
				let params = {
					inviteUserId: this.modalForm2.inviteUserId,
					userId: this.userId
				};
				changeInviteUser(params).then((res) => {
					if (res.status == 200 && res.data.status.code == 200) {
						this.$message.success('修改成功！');
						this.modalForm2.inviteUserId = '';
						this.inviteUserVisible = false;
						this.handleQuery();
					} else if (res.data.status.code == 450) {
						this.$message.warning(res.data.message);
						this.$router.push({
							path: '/manageLogin'
						});
					} else {
						this.$message.warning(res.data.message);
					}
				});
			},
			givingCard(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						let params = {
							amount: this.modalForm1.num,
							userId: this.userId
						};
						this.loading = true
						addCard(params).then((res) => {
							if (res.status == 200 && res.data.status.code == 200) {
								this.$message.success('赠送成功！');
								this.loading = false
								this.givingVisible = false;
								this.modalForm1.num = ''
								this.handleQuery();
							} else if (res.data.status.code == 450) {
								this.$message.warning(res.data.message);
								this.$router.push({
									path: '/manageLogin'
								});
							} else {
								this.$message.warning(res.data.message);
							}
						});
					}
				});
			},
			editLevel(val) {
				this.editLevelVisible = true;
				this.userId = val.id;
				this.modalForm.level = val.level;
			},
			changeLevel() {
				let params = {
					level: this.modalForm.level,
					userId: this.userId,
					levelTime: this.modalForm.levelTime
				};
				updateLevel(params).then((res) => {
					if (res.status == 200 && res.data.status.code == 200) {
						this.$message.success('修改成功！');
						this.editLevelVisible = false;
						this.handleQuery();
					} else if (res.data.status.code == 450) {
						this.$message.warning(res.data.message);
						this.$router.push({
							path: '/manageLogin'
						});
					} else {
						this.$message.warning(res.data.message);
					}
				});
			},
			rowKey(record, index) {
				return index;
			},
			handleQuery() {
				let params = {
					pageNum: this.pagination.current,
					pageSize: this.pagination.pageSize,
					username: this.queryForm.username,
					email: this.queryForm.email,
					realName: this.queryForm.realName,
					inviteUserName: this.queryForm.inviteUserName
				};
				this.tableLoading = true;
				getUserList(params).then((res) => {
					if (res.status == 200 && res.data.status.code == 200) {
						this.userData = res.data.data.records;
						this.pagination.total = res.data.data.total;
					} else if (res.data.status.code == 450) {
						this.$message.warning(res.data.message);
						this.$router.push({
							path: '/manageLogin'
						});
					} else {
						this.$message.warning(res.data.message);
					}
					this.tableLoading = false;
					this.loading1 = false
				});
			},
			pageChange(val) {
				this.pagination.pageSize = val.pageSize;
				if (val.pageSize != this.lastPageSize) {
					this.pagination.current = 1;
					this.lastPageSize = val.pageSize;
				} else {
					this.pagination.current = val.current;
				}
				this.handleQuery();
			}
		}
	};
</script>

<style lang="scss">
	.userManage {

		.ant-table-thead>tr>th,
		.ant-table-tbody>tr>td {
			padding: 10px;
		}

		.ant-form-item-control {
			text-align: left;
		}
	}
</style>
